/*
 * @Description: 头部组件（包含搜索框，搜索删除按钮）
 * @Author: buwei.huang
 * @Date: 2019-06-17 15:08:37
 * @Last Modified by: buwei.huang
 * @Last Modified time: 2019-06-17 15:09:35
 */
<template>
  <!-- <div class="search_header"> -->
  <title-bar class="search_header">
    <!-- 输入框 -->
    <div class="search_input flex-h flex-he flex-vc">
      <input
        ref="searchInput"
        class=""
        :placeholder="placeholderVal"
        v-model="searchValue"
      />
    </div>
    <!-- 右侧输入框清空按钮 -->
    <div
      slot="right"
      class="header_right flex-h flex-vc"
      v-show="searchValue !== ''"
      @click="cleanValue"
    >
      <i class="icon iconfont icon-cancel" />
    </div>
  </title-bar>
  <!-- </div> -->
</template>
<script>
import TitleBar from '@/components/titlebar/TitleBar'
import { getUrlParamByKey } from 'vue-xiaobu-utils'
export default {
  components: {
    'title-bar': TitleBar
  },
  data() {
    return {
      searchValue: '',
      placeholderVal: '搜索公交线路、车站'
    }
  },
  computed: {
    getSearchText() {
      return this.$store.getters.searchText
    }
  },
  watch: {
    searchValue() {
      // 将用户填写的数据存储到vuex中
      this.$store.dispatch('fetchSearchText', this.searchValue)
    },
    getSearchText(val) {
      this.searchValue = val || ''
    }
  },
  mounted() {
    let type = getUrlParamByKey('type')
    switch (type) {
      case '1': this.placeholderVal = '搜索公交线路'
        break
      case '2': this.placeholderVal = '搜索公交站点'
        break
      case '3': this.placeholderVal = '搜索位置'
        break
      default:
        break
    }
  },
  methods: {
    // 清除搜索框
    cleanValue() {
      this.searchValue = ''
    }
  }
}
</script>
<style>
.title-bar-wrapper {
  background-color: #fff;
}
.search_header {
}
.search_input {
  width: 100%;
}
.search_input input {
  border: none;
  width: calc(100% - 0.533333rem - 0.4rem * 2 - 14px - 10px);
  margin-right: 10px;
  height: 40px;
  line-height: 40px;
  font-size: 14px; /* no */
  color: #333;
}
.search_input input::-webkit-input-placeholder {
  color: #cccccc;
}
/* 右侧输入框清空按钮 */
.header_right {
  margin-right: 30px;
}
.header_right .icon {
  display: block;
  font-weight: bold;
  line-height: 36px;
  text-align: center;
  width: 36px;
  height: 36px;
  background-color: #d8d8d8;
  border-radius: 50%;
}
.header_right .iconfont {
  font-size: 6px; /* no */
  color: #fff;
}
</style>
